<template>
  <div class="findmusic">
    <div class="wrap">
      <div class="wrap-inner">
        <ul class="nav">
          <li>
            <router-link to="/find/recommend"><em>推荐</em></router-link>
          </li>
          <li>
            <router-link to="/find/rankinglist"><em>排行榜</em></router-link>
          </li>
          <li>
            <router-link to="/find/songlist"><em>歌单</em></router-link>
          </li>
          <li>
            <router-link to="/find/newsradio"><em>主播电台</em></router-link>
          </li>
          <li>
            <router-link to="/find/singer"><em>歌手</em></router-link>
          </li>
          <li>
            <router-link to="/find/newsongs"><em>新碟上架</em></router-link>
          </li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.findmusic {
  .wrap {
    z-index: 90;
    height: 35px;
    box-sizing: border-box;
    background-color: #c20c0c;
    border-bottom: 1px solid #a40011;
    .wrap-inner {
      width: 1100px;
      height: 34px;
      margin: 0 auto;
      .nav {
        float: left;
        padding-left: 180px;
        li {
          list-style: none;
          float: left;
          height: 34px;
          line-height: 34px;
          text-align: center;
          a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
            em {
              font-style: normal;
              display: inline-block;
              height: 20px;
              padding: 0 13px;
              margin: 7px 17px 0;
              border-radius: 20px;
              line-height: 21px;
            }
          }

          a:hover,
          a.z-slt {
            color: #fff;
            text-decoration: none;
            em {
              background: #9b0909;
            }
          }
        }
      }
    }
  }
}
</style>
